<template>
	<div class="vip-list">
		<div class="vip-item" v-for="item in vipList" :key="item.id" @click="recharge(item)">
			<img :src="item.icon" />
			<div class="vip-info">
				<p>{{item.name}}</p>
				<p>{{item.investSill}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	export default {
		name: 'vip',
		data() {
			return {
				vipList: []
			}
		},
		methods: {
			getVipList() {
				this.$http.get('/vip/getystemVipGradeList.htm', {

				}).then(res => {
					if(res.code == 0) {
						this.vipList = res.data;
					}
				})
			},
			recharge(row) {
				this.$http.post('/vip/supplementValue.htm', {
					amount: row.investSill * 100,
					userId: sessionStorage.getItem('userId')
				}).then(res => {
					if(res.code == 0) {
						Toast('充值成功');
						this.$router.push('/index');
					}
				})
			}
		},
		created() {
			this.getVipList();
			this.api.setHeader('会员升级');
		}
	}
</script>

<style lang="less">
	.vip-list {
		padding: 0.2rem;
		max-width: 1024px;
		margin: 0 auto;
		.vip-item {
			float: left;
			box-sizing: border-box;
			margin: 0.2rem 0;
			width: calc(~'50% - 0.2rem');
			text-align: center;
			padding: 0.12rem;
			border: 1px solid #DDDDDD;
			&:nth-child(odd) {
				margin-right: 0.4rem;
			}
			.vip-info {
				display: flex;
				justify-content: space-between;
				p {
					font-size: 0.24rem;
					&:first-child {
						color: #E4393C;
					}
					&:last-child:after {
						content: '元';
					}
				}
			}
		}
		&:after {
			display: block;
			content: "";
			clear: both;
		}
	}
</style>